<template>
  <div>
    <div class="tree_grid">
      <table width="100%" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th v-for="(item, index) in data.columns" :key="index" v-align="align(item)" :width="item.width">{{item.title}}</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(item, index) in initData" :key="index" v-if="show(item)">
          <template v-for="(v, i) in data.columns">
            <td v-if="v.field" v-align="align(v)" :width="v.width">
              <!--<span v-html="i == 0 ? item.space : ''"></span>-->
              <span @click="toggle(item)" v-html="treeHit(item, i)"></span>
              <span v-if="v.formatter" v-html="v.formatter(item)"></span>
              <span v-else>{{item[v.field]}}</span>
            </td>
            <td v-else v-align="align(v)" :width="v.width">
              <el-button v-for="(operate, j) in v.operate" :key="j" type="text" @click="operate.handle(index, item)">{{operate.name}}</el-button>
            </td>
          </template>
        </tr>
        </tbody>
      </table>
    </div>

    <Pagination v-if="data.pagination" />
  </div>
</template>

<script>
  import {mixins} from "@/core";
  import qs from "qs";

  export default {
    mixins: [mixins],
    props: {
      data: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    data () {
      return {
        initData: [],
        formData: this.$parent.formData,
        API: {
          deleteUrl: this.data.deleteUrl
        }
      }
    },
    created () {
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$.ajax({
          type: "get",
          url: `${this.data.url}?${qs.stringify(this.formData)}&page=${this.page}&rows=${this.pageSize}`,
          success: (data) => {
          	this.total = data.total;
          	this.initData.splice(0);

          	let tableData;
          	if (this.data.loadFilter) {
              tableData = this.data.loadFilter(data) || data.rows;
            } else {
              tableData = data.rows;
            }

            tableData = tableData.filter((item) => {
              if (!item.parentId) {
                item.level = 1;
              }
              tableData.forEach((ite) => {
                if (ite.parentId === item.id) {
                  item.children = item.children || [];
                  ite.expanded = this.data.expand;
                  ite.show = this.data.expand;
                  item.expanded = this.data.expand;
                  item.show = this.data.expand;
                  item.children.push(ite);
                }
              });

              return !item.parentId && item;
            });

            (function loop(tableData, ctx, level) {
              tableData.forEach(item => {
                item.space = item.parentId ? "<i class='space'></i>".repeat(level) : "";
                ctx.initData.push(item);

                item.children && loop(item.children, ctx, level + 1);
              })
            }(tableData, this, 1));
          }
        })
      },
      treeHit (item, i) {
        if (i === 0 && item.children) {
          return item.expanded ? "<i class='fa fa-caret-down'></i>" : "<i class='fa fa-caret-right'></i>";
        }
      },
      show (item) {
        return (item.level === 1 || item.show);
      },
      toggle (item) {
        if (item.children) {
          if (item.expanded) {
            item.expanded = !item.expanded;
            this.close(item);
          } else {
            item.expanded = !item.expanded;
            this.open(item);
          }
        }
      },
      close (item) {
        if (item.children) {
          close(item.children);
        }

        function close(items) {
          items.forEach(child => {
            child.show = false;
            if (child.children) {
              close(child.children);
            }
          });
        }
      },
      open (item) {
        if (item.children) {
          open(item.children);
        }

        function open(items) {
          items.forEach(child => {
            child.show = true;
            if (child.children) {
              child.expanded && open(child.children);
            }
          });
        }
      },
      handleCurrentChange (page) {
        this.page = page;
        this.getTableData();
      },
      align (item) {
        return this.data.align ? this.data.align : item.align ? item.align : '';
      }
    }
  }
</script>

<style scoped>
  .el-button {
    margin-bottom: 20px;
  }
</style>

<style scoped lang="scss">
  table .el-button {
    margin-bottom: 0 !important;
  }

  .tree_grid {
    background-color: #fff;
    padding: 20px;

    table {
      width: 100%;
      font-size: 12px;
      border: none;
    }

    th, td {
      height: 50px;
      padding-left: 20px;
      text-align: left;

      &.is-center {
        text-align: center;
      }
    }

    thead tr {
      font-size: 16px;
      background-color: #e8f0f6;
      color: #4e5358;
    }

    tbody {
      font-size: 14px;
      color: #4e5358;

      tr:nth-child(2n) {
        background-color: #e8f0f6;
      }
    }
    & /deep/ .space {
      display: inline-block;
      width: 20px;
    }

    & /deep/ .fa {
      cursor: pointer;
      width: 20px;
      text-align: center;
      margin-left: -20px;
      margin-right: -3px;
    }

    .el-button--text {
      padding: 0;
    }
  }
</style>
